<template>
  <view class="box">
    <view class="content-box">
      <view class="content">
        <view class="content1">
          <view>可参与的抢购</view>
        </view>
        <view class="content2" v-for="(item,index) in goods" :key="index">
          <view>
            <image :src="item.g1"> </image>{{item.g2}}
          </view>
          <view>{{item.g3}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goods:[
        {g1:"../../static/2.jpg",g2:'橘子果酱',g3:'去抢购'},
        {g1:"../../static/1.jpg",g2:'KUMA HIME',g3:'去抢购'},
        {g1:"../../static/2.jpg",g2:'tlov、Long',g3:'去抢购'},
        {g1:"../../static/1.jpg",g2:'左兔先生',g3:'去抢购'},
        {g1:"../../static/2.jpg",g2:'lazycat',g3:'去抢购'}
      ]
    };
  },
  methods: {},
};
</script>

<style lang="scss">
.box {
  background-color: #acacac;
  height: 93vh;
  .content-box {
    padding-top: 10px;
    background-color: #acacac;
    width: 80%;
      margin: auto;
    .content {
      border-radius: 10px;
      margin-top: 70px;
      height: 300px;
      background-color: #fff;
      .content1{
        padding-top:10px;
        font-size: 18px;
        text-align: center;
      }
      .content2{
        padding:5px 10px 5px 10px;
        display: flex;
        justify-content: space-between;
        view:nth-child(1){
          image{
          width:30px;
          height:30px;
          border-radius: 50%;
        }
        }
        view:nth-child(2){
          margin-top: 10px;
          background-color: #FC4424;
          border-radius: 15px;
          color:white;
          font-size: 12px;
          padding:8px;
        }
      }
    }
  }
}
</style>
